import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
    TextInput,
    TouchableOpacity
} from 'react-native'
import {inject} from "mobx-react/native"
import Layer from "src/components/Layer"
import {checkPhone} from "src/util"

@inject('userAuth')
export default class Input extends Component<{}> {
    constructor(props){
        super(props)
        this.state = {
            smsText: '获取验证码',
            isFetchingSMSCode: false
        }
    }
    render() {
        return (
            <View style={[styles.container, this.props.style]}>
                <Text style={styles.title}>{this.props.title}</Text>
                {
                    this.props.isInput && <TextInput
                        style={styles.input}
                        defaultValue={this.props.data}
                        placeholder={this.props.placeholder}
                        onChangeText={(text)=>{this.props.onChangeText && this.props.onChangeText(text)}}
                    />
                }

                {
                    this.props.isLabel && <Text style={styles.input}>{this.props.text}</Text>
                }
                {
                    this.props.havePhotoButton && <TouchableOpacity onPress={this.props.PhotoCallback}
                        style={{width: 40, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        <Image source={require('src/assets/mine/cameraSmall.png')}/>
                    </TouchableOpacity>
                }

                {
                    this.props.haveSmsCodeButton && <TouchableOpacity
                        onPress={()=> {
                            if(this.state.isFetchingSMSCode) return
                            if(!checkPhone(this.props.phone)){
                                return Layer.showMsg('手机号码不正确')
                            }
                            this.props.userAuth.getSmsCode({
                                mobile: this.props.phone
                            }).then(()=>{
                                Layer.showMsg('验证码已发送')
                                var timesRun = 0;
                                var interval = setInterval(() =>{
                                    timesRun += 1;
                                    if(timesRun === 60){
                                        this.setState({
                                            isFetchingSMSCode: false,
                                            smsText: '获取验证码'

                                        })
                                        clearInterval(interval)
                                        return
                                    }
                                    this.setState({
                                        isFetchingSMSCode: true,
                                        smsText: (60 - timesRun)
                                    })
                                }, 1000)
                            })
                        }}
                        style={{width: 100, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{color: '#378EFB', fontSize: 15, lineHeight: 21, fontFamily: 'PingFang SC'}}>{this.state.smsText}</Text>
                    </TouchableOpacity>
                }
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        height: 50,
        backgroundColor: 'white'
    },
    title: {
        color: '#2E2E2E',
        lineHeight: 22,
        fontSize: 15,
        marginLeft: 16,
        width: 70,
        fontFamily: 'PingFang SC'
    },
    input: {
        padding:0,
        marginLeft: 19,
        color: '#8E8E93',
        fontSize: 15,
        lineHeight: 22,
        flex: 1,
        height: 22,
        fontFamily: 'PingFang SC'
    }
})